<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2022/12/20
  Time: 15:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/cart.css">

</head>
<body>
<!-- 头部信息 -->
<div class="header_con">
    <div class="header">
        <div class="welcome">欢迎来到甜品商城!</div>
        <div class="user_login">
            <a href="">我的购物车</a>
            <span>|</span>
            <a href="">我的订单</a>
        </div>
    </div>
</div>
<div class="search_bar clearfix">
    <a href="#" class="logo fl"><img src="./pictures/logo测试.jpg" width="100"></a>
    <div class="search_con fl">
        <input type="text" class="input_text fl" placeholder="搜索商品">
        <input type="button" class="input_btn fr" value="搜索">
        <table>
            <tr>
                <th><input type="checkbox" class="all">全选</th>
                <th>商品</th>
                <th>单价</th>
                <th>商品数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            <tbody id="carBody">
            <tr class="item">
                <td><input type="checkbox" class="liu"></td>
                <td><img src="./pictures/2.jpg" width="50%"></td>
                <td class="price">20¥</td>
                <td>
                    <ul class="num">
                        <li >
                            <button class="add">+</button>
                        </li>
                        <li class="count">
                            <input type="text" class="input" value="1" readonly>
                        </li>
                        <li >
                            <button class="reduce" disabled>-</button>
                        </li>
                    </ul>
                </td>
                <td class="total">1</td>
                <td class="del"><button>删除</button></td>
            </tr>

            <tr class="item">
                <td>
                    <input type="checkbox" class="liu">
                </td>
                <td>
                    <img src="./pictures/圣诞4.jpg" width="50%">
                </td>
                <td class="price">30¥</td>
                <td>
                    <ul class="num">
                        <li >
                            <button class="add">+</button>
                        </li>
                        <li  class="count">
                            <input type="text" class="input" value="1" readonly>
                        </li>
                        <li >
                            <button class="reduce" disabled>-</button>
                        </li>
                    </ul>
                </td>
                <td class="total">1</td>
                <td class="del"><button>删除</button></td>
            </tr>

            <tr class="item">
                <td><input type="checkbox" class="liu">
                </td>
                <td>
                    <img src="./pictures/new_goods_1.jpg" width="50%">
                </td>
                <td class="price">199¥</td>
                <td>
                    <ul class="num">
                        <li >
                            <button class="add">+</button>
                        </li>
                        <li class="count">
                            <input type="text" class="input" value="1" readonly>
                        </li>
                        <li >
                            <button class="reduce" disabled>-</button>
                        </li>
                    </ul>
                </td>
                <td class="total">1</td>
                <td class="del"><button>删除</button></td>
            </tr>

            <tr class="item">
                <td><input type="checkbox" class="liu">
                </td>
                <td>
                    <img src="./pictures/蛋糕2.jpg" width="50%">
                </td>
                <td class="price">50¥</td>
                <td>
                    <ul class="num">
                        <li >
                            <button class="add">+</button>
                        </li>
                        <li  class="count">
                            <input type="text" class="input" value="1" readonly>
                        </li>
                        <li >
                            <button  class="reduce" disabled>-</button>
                        </li>
                    </ul>
                </td>
                <td class="total">1</td>
                <td class="del"><button>删除</button></td>
            </tr>
            </tbody>
        </table>
        <div class="foot">
            <div class="bottom">
                已经选中<i id="totalNum">0</i>件商品&nbsp;&nbsp;&nbsp;商品总价为:<i id="total_price">0¥</i>
                <button class="jiesuan">去结算</button>
            </div>
        </div>

</body>
<script>
    let adds = document.querySelectorAll('.add')
    let reduces = document.querySelectorAll('.reduce')
    let prices =document.querySelectorAll('.price')
    let total_price = document.querySelector('#total_price')
    let totalNum = document.querySelector('#totalNum')
    let dels = document.querySelectorAll('.del')
    let totals =document.querySelectorAll('.total')
    let inputs = document.querySelectorAll('.input')
    // 获取父元素
    let carBody = document.querySelector('#carBody')
    let liu = document.querySelectorAll('.liu')
    let all = document.querySelector('.all')

    all.addEventListener('click',function(){
        for(let i = 0; i < liu.length; i++){
            liu[i].checked = all.checked
        }
    })

    for( let i = 0; i < adds.length ; i++){
        totals[i].innerHTML = prices[i].innerHTML
        // 增加
        adds[i].addEventListener('click',function(){
            inputs[i].value++
            reduces[i].disabled = false
            totals[i].innerHTML = parseInt(prices[i].innerHTML)*inputs[i].value + '¥'
            // 计算现在总额
            sumMoney()
        })
        // 减少
        reduces[i].addEventListener('click',function(){
            inputs[i].value--
            totals[i].innerHTML = parseInt(prices[i].innerHTML)*inputs[i].value + '¥'
            if(inputs[i].value <= 1) {
                reduces[i].disabled = true
            }
            // 计算现在总额
            sumMoney()
        })
        // 删除
        dels[i].addEventListener('click',function(){
            // 父元素.removeChild（子元素）
            carBody.removeChild(this.parentNode)
            sumMoney()
        })
    }

    // 总价 result函数
    function sumMoney(){
        let totals =document.querySelectorAll('.total')
        let inputs = document.querySelectorAll('.input')
        let num = 0
        let sum = 0
        for( let i = 0; i < totals.length; i++){
            sum = sum + parseInt(totals[i].innerHTML)
            num = num + Number(inputs[i].value)
        }
        total_price.innerHTML = sum + '¥'
        totalNum.innerHTML = num
    }
    sumMoney()
</script>
</html>